<script>
export default {
    name: "itemDateRange",
    props: {
        value: [Number, String, Array, Object, undefined, null],
        config: Object,
        change: Function,
    },
    data() {
        return {
            configSelf: {},
            options: null,
            valueSelf: undefined,
        };
    },
    watch: {
        config: {
            handler(val) {
                if (val?.label)
                    this.init();
            },
            deep: true,
            immediate: true
        },
        value: {
            handler(val) {
                this.valueSelf = val;
            },
            immediate: true,
        }
    },
    methods: {
        init() {
            this.configSelf = { ...this.config };
            // 处理placeholder
            this.configSelf.placeholder = `请选择${this.config?.label}`;
        },
        setValueSelf(value) {
            this.change(value);
        },
    },
    mounted() { },
    render() {
        return (
            <el-date-picker
                vModel={this.valueSelf}
                type="datetimerange"
                props={{ ...this.configSelf }}
                onChange={this.setValueSelf}
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        );
    },
};
</script>
